<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>

<%= content_tag :tr,
  id: "#{self.class.to_s.underscore}_#{@resource.record_param}",
  class: class_names("group bg-white hover:bg-gray-50 z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
  data: {
    index: @index,
    component_name: self.class.to_s.underscore,
    resource_name: @resource.class.to_s,
    record_id: @resource.record_param,
    **(click_row_to_view_record ? {
      visit_path: helpers.resource_show_path(resource: @resource, parent_resource: @parent_resource, parent_record: @parent_record, parent_or_child_resource:),
      action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord"
    } : {}),
    **item_selector_data_attributes(@resource, controller: class_names("table-row": click_row_to_view_record)),
    **(try(:drag_reorder_item_data_attributes) || {}),
  } do %>
  <% if @resource.record_selector %>
    <td class="item-selector-cell w-10">
      <div class="flex justify-center h-full">
        <%= render Avo::RowSelectorComponent.new floating: false, index: @index, checked: @row_selector_checked %>
      </div>
    </td>
  <% end %>
  <% if @resource.render_row_controls_on_the_left? %>
    <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
      <div class="flex items-center justify-end flex-grow-0 h-full">
        <%= render resource_controls_component %>
      </div>
    </td>
  <% end %>
  <% @header_fields.each_with_index do |table_header_lable, index| %>
    <% field = @fields.find { |field| field.table_header_label == table_header_lable } %>
    <% if field.present? %>
      <%= render field.component_for_view(:index).new(
        field: field,
        resource: @resource,
        reflection: @reflection,
        index: index,
        parent_record: @parent_record,
        parent_resource: @parent_resource
      ) %>
    <% else %>
      <td class="px-3">—</td>
    <% end %>
  <% end %>
  <% if @resource.render_row_controls_on_the_right? %>
    <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
      <div class="flex items-center justify-end flex-grow-0 h-full">
        <%= render resource_controls_component %>
      </div>
    </td>
  <% end %>
<% end %>
